<template>
  <div class="my-block"> 
    <Header title="我的" />
    <div class="head">
      <div class="head-img">
        <img src="../assets/log.png" alt="touxiang">
      </div>
    </div>
    <div class="order">
      <van-divider >我的订单</van-divider>
      <div class="msg">
        <div class="msg-block">
          <div class="icon">
            <i class="iconfont icon-dianying"></i>
          </div>
          <div>电影</div>
        </div>
        <div class="msg-block">
          <div class="icon mall">
            <van-icon name="bag" size="25" />
          </div>
          <div>商城</div>
        </div>
      </div>
    </div>
    <div class="list">
      <van-cell is-link title="优惠券"/>
      <van-cell is-link title="折扣卡"/>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue"
export default {
  name: "me",
  components: {
    Header,
  }
};
</script>

<style scoped>
.my-block {
  width: 100%;
  background-color: #F4F4F4;
}
.my-block .head{
  width: 100%;
  padding: 30px 0;
  background-color: #D6574E;
}
.my-block .head .head-img{
  width: 1.5rem;
  margin: auto;
}
.my-block .head .head-img img{
  width: 100%;
  border-radius: 50%;
}
.my-block .order{
  margin-top: 10px;
  width: 100%;
  background-color: #ffffff;
  padding-top: 15px;
  padding-bottom: 30px;
}
.van-divider {
  width: 50%;
  margin: auto;
}
.msg {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}
.msg .msg-block {
  width: max-content;
  text-align: center;
}
.msg .msg-block .icon {
  background-color: red;
  color: #ffffff;
  padding: 10px;
  border-radius: 50%;
  margin-bottom: 5px;
}
.msg .msg-block .icon .icon-dianying{
  background-color: red;
  color: #ffffff;
  font-size: 25px;
}
.mall {
  background-color: aquamarine!important;
}

.list {
  margin-top: 10px;
}
</style>